<!--  -->
<template>
<div class="userdata">
   <div class="user">
        <!-- 筛选头部 -->
         <div class="screen">
          <input-screen :placeholder='placeholder' @fromChild="getChildinput"></input-screen>
          <Select @fromChild="getChilddpthree"> </Select>
          <date-picker-one @fromChild="getChilddpone"></date-picker-one>
           <el-button type="primary" round @click="query" style="margin-left:2%;">查询</el-button>
         </div>
         <!-- 占位符 -->
         <div style="height:3vh;background: #eff2f7;"></div>
         <!-- 分布图表 -->
         <div id='user_echarts'></div>
   </div>
</div>
</template>

<script>
import inputScreen from '../components/screen/input';
import DatePickerOne from '../components/screen/DatePickerOne';
import Select from '../components/screen/select';
export default {
data() {
return {
    placeholder:'请输入手机号',//input框中的placehould
    content:"",//input收入值
    value:"",//单时间日期
    selectname:'',//下拉列表内容
    clientWidth:'',//监听页面的宽度
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
   var echarts = require('echarts')
		// // 绘制图表
		var myChart = echarts.init(document.getElementById('user_echarts'));
			myChart.setOption({
    title: {
        text: '某站点用户访问来源',
        left: 'left'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: []
    },
    series: []
   });
		//加载数据的动画
		myChart.showLoading();
		// 折线图数据加载模块
		//此处获取并加载数据
		setTimeout(()=>{
        let legend_data =  ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
		let series_data = [ {
            name: '访问来源',
            type: 'pie',
            radius: '65%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }];
				//数据加载到图标中
	         	myChart.setOption({
								legend: {
									data:legend_data
								},
								series:series_data
			});
	 //折线图自适应配置
         window.onresize = () =>{
			 //因为echart自适应影响全局，所以在此处监听页面宽度变化
			 if(this.$route.path == '/userdata'){
				myChart.resize();
				this.clientWidth = document.body.clientWidth;
				this.$store.commit('Gwidth',this.clientWidth);
			 }else{
				this.clientWidth = document.body.clientWidth;
				this.$store.commit('Gwidth',this.clientWidth);
			 }
			
		};
		myChart.hideLoading();    //隐藏加载动画
		},1000);
},
methods:{
     //获取input搜索值
      getChildinput (v) {
            this.content = v;
        },
        //获取单时间值
        getChilddpone(e){
          this.value = e;
        },
        //获取下拉数据
        getChilddpthree(e){
            this.selectname = e;
        },
        //点击查询
        query(){
            console.log(this.content + '' + this.value);
        },
},
components:{inputScreen,DatePickerOne,Select}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.userdata{
    width: 100%;
    min-height: 84vh;
    background: #eff2f7;
    overflow-y: auto;
}
.user{
    background: #fff;
    width: 98%;
    margin: auto;
    margin-top: 2.5vh;
}

.screen{
    display: flex;
    height: 8vh;
    justify-content: flex-start;
    align-items: center;
}
#user_echarts{
	width: 97.5%;
	height: 63vh;
	margin: auto;
	margin-top: 5vh;
	padding-top: 5vh;
	/* margin-left: 10%; */
	background: #fff;
}
</style>